import {View, Text, StyleSheet, ViewStyle, TextStyle} from 'react-native'
import React, {Component} from 'react'

interface LabelWithValueProps {
    label: string,
    value: string | number,
    style?: ViewStyle,
    labelStyle?: TextStyle,
    valueStyle?: TextStyle,
}

interface LabelWithValueState {

}


export default class LabelWithValue extends Component<LabelWithValueProps, LabelWithValueState> {


    constructor(props: LabelWithValueProps) {
        super(props);
    }

    render() {
        const {label, value, style, labelStyle, valueStyle} = this.props;
        return (<View style={[LabelWithValueStyle.container, style]}>
            <Text style={[LabelWithValueStyle.label, labelStyle]}>{label}</Text>
            <Text style={[LabelWithValueStyle.value, valueStyle]}>{value}</Text>
        </View>)
    }
}

const LabelWithValueStyle = StyleSheet.create({
    container: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingTop: 10
    },
    label: {
        fontSize: 14,
        color: "#fff"
    },
    value: {
        fontSize: 20,
        color: "#fff"
    }
});

 